import React, { Component } from 'react'
import {
  Grid,
  Image,
  Segment,
  Button,
  Statistic,
  Table,
  Header,
  Icon,
} from 'semantic-ui-react'
import { Card } from 'components/dashboard'
import Pie from './pieChart'
import Line from './lineChart'
import TaskFinish from './taskFinishChart'
export default class HomePage extends Component {
  render() {
    const { dashboard } = this.props
    const { project_view,project_task_count_view,project_task_finish_view,project_class } = dashboard
    const { datasets, items, teams, members, classes} = project_view[0]
    const { in_progress, done } = project_task_count_view[0]
    return (
      <Grid style={{ width: '100%', padding: '1em' }}>
        <Grid.Row>
          <Grid.Column width={16}>
            <Grid>
              <Grid.Row columns={5}>
                <Grid.Column>
                  <Card icon="database" title="数据集" number={datasets} />
                </Grid.Column>
                <Grid.Column>
                  <Card icon="tasks" title="任务数" number={items} />
                </Grid.Column>
                <Grid.Column>
                  <Card icon="tags" title="标注类型" number={classes} />
                </Grid.Column>
                <Grid.Column>
                  <Card icon="user" title="成员数" number={members} />
                </Grid.Column>
                <Grid.Column>
                  <Card icon="users" title="组织数" number={teams} />
                </Grid.Column>
              </Grid.Row>
              <Grid.Row columns={3}>
                <Grid.Column>
                  <Segment textAlign="center">
                    <Header as='h3' icon>
                      任务完成情况
                    </Header>
                    <Pie data={[
                      { name:'已完成',value:parseInt(done),fill:'#21ba45' },
                      { name:'未完成',value:parseInt(in_progress) },
                    ]}/>
                  </Segment>
                </Grid.Column>
                <Grid.Column>
                  <Segment textAlign="center">
                    <Header as='h3' icon>
                      每种标注类型数量
                    </Header>
                    <Line data={project_class} />
                  </Segment>
                </Grid.Column>
                <Grid.Column>
                  <Segment textAlign="center">
                    <Header as='h3' icon>
                      最近一周任务完成数量
                    </Header>
                    <TaskFinish data={project_task_finish_view.map(data=>({
                      name:data.day,
                      '数量':data.tasks
                    }))}/>
                  </Segment>
                </Grid.Column>
              </Grid.Row>
            </Grid>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    )
  }
}
